
<div class="heade_1">
    <style>
        a{
            text-decoration: none;
        }
        .index-top{
    height: 31px;
    background: #F8F8F8;
    margin: 0 auto;
}
.index-top-body{
    width: 1200px;
    height:31px;
    background: #F8F8F8;
    margin: 0 auto;
    /* border: 1px solid black; */
    font-size: 12px;
    line-height: 31px;
    display: flex;
    justify-content: space-between;
    color: #888888;
}
.index-top-body-left{
    display: flex;
    box-sizing: border-box;
    justify-content: center;
   
}
.index-top-body-left-l{
    display: flex;
    position: relative;
    margin-right: 18px;

}
.index-top-body-left-l>span:hover{
    color: #B20FD3;
}
.zklhy{
    display: flex;
    position: absolute;
    width: 320px;
    height: 100px;
    left: 0px;
    top: 31px;
    background: #FFFFFF;
    border: 1px solid #cccccc;
    z-index: 500;
    display: none;
}
.zklhy span{
    position: absolute;
    left:90px;
    top: 30px;
}
.index-top-body-left-r{
    display: flex;
    justify-content: space-between;
    margin-left: 10px;
}
.iconfont{
    margin-left: 3px;
    margin-right:3px; 
    font-size: 2px !important;

}
.index-top-body-right{
    display: flex;
}
.grzx{
    width: 265px;
    height: 245px;
    background: #FFFFFF;
    border:1px solid #cccccc;
    border-top: none;
    position: absolute;
    left: 0;
    top: 31px;
    z-index: 500;
    display: none;
}
.grzx span{
    margin-right: 20px;
}
.qycg{
    width: 320px;
    height: 100px;
    border: 1px solid #cccccc;
    border-top: none;
    background: #FFFFFF;
    position: absolute;
    left: 0;
    top: 31px;
    display: none;
}
.qycg span{
    margin-right: 20px;
}
.qycg>span:hover{
    color:#B20FD3 ;
}

.f{
    position: absolute;
    top: 0;
    right: 0;
}
.grzx>span:hover{
    color:#B20FD3 ;
}
.fwzx{
    width: 240px;
    height: 230px;
    position:absolute;
    left: 0;
    top: 31px;
    background: #FFFFFF;
    border:1px solid #cccccc;
    border-top: none;
    z-index: 500;
    padding: 0 10px;
    display: none;
}
.fwzx>span:hover,.fwzx>h4:hover{
    color:#B20FD3 ;
}
.fwzx span{
    line-height: 12px;
    margin-right: 20px;
}
.zxkw{
    position: absolute;
    left: 12px;
    bottom: -5px;
}
.wzdh{
    width: 1200px;
    height: 200px;
    background: #FFFFFF;
    border: 1px solid #cccccc;
    border-top: none;
    position: absolute;
    top: 31px;
    right: -132px;
    z-index: 500;
    padding: 20px;
    display: none;
}
.wzdh div{
    float: left;
    margin-left: 20px;
}
#fjx{
    width: 1px;
    height: 160px;
    background: #cccccc;
}
.ztcx span{
    margin-right: 30px;
}
.ztcx>h4:hover,.ztcx>span:hover{
    color:#B20FD3 ;
}
.zklapp{
    width: 165px;
    height: 200px;
    position: absolute;
    right: -20px;
    top: 31px;
    z-index: 500;
    display: none;
}
.r-2>div:nth-child(1):hover,.r-3>div:nth-child(1):hover,.r-4>div:nth-child(2):hover,.r-5>div:nth-child(1):hover,.r-6>div:nth-child(2):hover{
    color: #B20FD3;
}
.r-2:hover,.r-3:hover,.r-4:hover,.r-5:hover ,.r-6:hover{
    background: #FFFFFF;
}
.r-2,.r-3,.r-4,.r-5,.r-6{
    position: relative;
    display: flex;
    margin-left: 18px;
}
#zc,#fw,#sj,#lb{
    font-size: 16px !important;
    color:#B20FD3;
}
#yl{
    color:#B20FD3;
}
.index-head{
    width: 1200px;
    height:120px ;
    margin: 0 auto;
    /* border: 1px solid black; */
    display: flex;
    font-size: 12px;
    justify-content: space-between;
    align-items: center;
}
.logo{
    width: 125px;
    height: 56px;
    background: url(../imgs/logo.png) no-repeat;
}
.top-search{
    width: 500px;
    height: 52px;
    font-size: 12px;
    color: #888888;
    /* border: 1px solid orange; */
    
}
.top-search-up{
    height: 30px;
    border: 1px solid #B20FD3;

    display: flex;
    justify-content: space-between;
    align-items: center;
   
}
.top-search-up .ss{
    width: 60px;
    height: 30px;
    background: #B20FD3;
    border-style: none;
}
.top-search-up1{
    border: 1px solid #B20FD3;
    height: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.top-search-up2{
    width: 380px;
    height: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}
.top-search-up2 .search{
    outline: none;
}
.top-search-up2 #list{
    width: 350px;
    /* height: 150px; */
    border: 1px solid #cccccc;
    position: absolute;
    top: 30px;
    left: 0;
    background: white;
    z-index: 500;
    display: none;
}
.ss:hover{
    color: white;
    background: rgb(212, 55, 55);
}
.ss:active{
    color:rgb(212, 55, 55); 
    background: rgb(109, 101, 101);
}
.search{
    border-style: none !important;
    width: 380px;
    height: 28px;
line-height: 20px;
}

#sh{
    color:#B20FD3 ;
    font-size: 24px !important;
}

.top-search-dw{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 5px;
}
.Applexp , .hgsc{
    color:#B20FD3 ;
}
.cartlink{
    display: flex;
    justify-content: space-between;
    align-items: center;

}
.wd{
    margin: 0 10px;
}
#gwc{
font-size: 24px !important;
}
/* 导航 */
.box1{
    height: 40px;
    background: #F8F8F8;
    margin: 0 auto;

}
.qbsp-nav{
    width: 1200px;
    height: 40px;
    margin: 0 auto;
    background: #F8F8F8;
    /* border: 1px solid black; */
    font-size: 15px;
    line-height: 40px;
   
 
}
.qbsp-nav1{
    width: 200px;
    height: 40px;
    /* border: 1px solid black; */
    float: left;
    padding-left: 15px;
    font-weight: bold;
    color: #585858;
}
.qbsp-nav2{
    width:800px;
    height: 40px;
    /* border: 1px solid black; */
    float: left;
   line-height: 40px;
}
.qbsp-nav2 span{
    background: #B2B2B2;
    width: 1px;
    height: 15px;
    float: left;
    margin-top: 12.5px;
    

}
.qbsp-nav2 div{
 
    float: left;
    margin: 0 13px;

}
.qbsp-nav3{
    width: 170px;
    height: 40px;
   font-weight: 800;
   text-align: right;
   color: #585858;
    /* border: 1px solid black; */
    float: left;
}
.qbsp-nav4{
    padding: 5px 0px;
    width: 28px;
    font-size: 10px;
    display: flex;
    flex-flow: column;
    align-items: center; 
}
.qbsp-nav4 button{
    border-style: none;
} 
    </style>

<div class="index-top">
    <div class="index-top-body">
        <ul class="index-top-body-left">
            <li class="index-top-body-left-l">
                <span  class="welcome">尊贵的真快乐会员：<span class="un">xxx<span> <em class="exit">退出</em></span>
                <i class="iconfont">&#xe6ca;</i>
                <ul class="zklhy">
                    <div><img src="./imgs/cd-nav-51.png" alt=""></div>
                    <span>欢迎来到真快乐！<div class="login">
                        <a href=" ">请登录</a>
                       
                                              
                    </div></span>
                </ul>
            </li>
            <div><a href="../login.html">登录</a> </div>
            <div class="index-top-body-left-r">
                <div id="yl"><a href="../register.html">注册有礼</a> </div>
                <i id="zc" class="iconfont">&#xe62b;</i>
            </div>
        </ul>
        <ul class="index-top-body-right">
            <li class="r-1">我的订单</li>
            <li class="r-2 abc" >
                <div class="my">个人中心 </div>
                <i class="iconfont">&#xe6ca;</i>
                <ul class="grzx efg">
                    <span>个人中心，<a href="../login.html">请登录！</a></span><br>
                    <span>待处理订单</span> <span> 我的收藏</span><br>
                    <span>个人资料</span>
                    <hr border="0.3px solid #F8F8F8">
                    <span>我的真快乐券</span>
                    <div><img src="./imgs/cd-nav-1.png" alt="">   </div>
                </ul>
            </li>
            <li  class="r-3 abc">
                <div >企业采购</div>
                <i class="iconfont">&#xe6ca;</i>
                <ul class="qycg efg">
                    <span>企业购首页</span><span>企业场景购</span><span>政企采购</span><br>
                    <span>解决方案</span><span>发布采购单</span><span>美通卡</span><br>
                    <span>联系我们</span>
                    <div class="f"><img src="./imgs/cd-nav-2.png" alt=""></div>
                </ul>
            </li>
            <li  class="r-4 abc">
                <i id="fw" class="iconfont">&#xe607;</i>
                <div >服务中心</div>
                <i class="iconfont">&#xe6ca;</i>
                <ul class="fwzx efg">
                    <h4>用户服务</h4>
                    <span>售后服务</span>
                    <span>帮助服务</span>
                    <span>新手指南</span>
                    <br>
                    <span>客服服务</span>
                    <span>用户注销</span>
                    <h4>商家服务</h4>
                    <span>招商合作</span>
                    <span>商家登录</span>
                    <span>广告平台</span>
                    <br>
                    <span>平台规则</span>
                    <span>商家培训</span>
                    <div class="zxkw"><img src="./imgs/cd-nav-3.png" alt=""></div>
                </ul>
            </li>
            <li  class="r-5 abc">
                <div>网站导航</div>
                <i class="iconfont">&#xe6ca;</i>
                <ul class="wzdh efg">
                    <div class="ztcx">
                        <h4>主题促销</h4>
                        <span>抢购</span>
                        <span>服饰城</span>
                        <span>智能</span>
                        <br>
                        <span> &nbsp;</span>
                        <span>超市</span>
                        <span>家具家装</span>
                    </div>
                   
                    <div id="fjx"></div>
                    <div class="ztcx">
                        <h4>特色分类</h4>
                        <span>电视音响</span>
                        <span>手机</span>
                        <span>住宅家具</span>
                        <span>服饰鞋帽</span>
                        <span>食品酒水</span>
                        <br>
                        <span>冰洗</span>
                        <span>数码</span>
                        <span>住宅家具</span>
                        <span>服饰鞋帽</span>
                        <span>美妆个护</span>
                        <br>
                        <span>空调</span>
                        <span>电脑办公</span>
                        <span>住宅家具</span>
                        <span>钟表首饰</span>
                        <span></span>
                        <br>
                        <span>厨卫生活</span>
                        <span>汽车</span>
                        <span></span>
                        <span></span>
                        <span>&nbsp;</span>
                        <br>
                    </div>
                    <div id="fjx"></div>
                    <div class="ztcx">
                        <h4>便捷服务</h4>
                        <span>话费充值</span>
                        <span>上门服务</span>
                     
                    </div>
                   
                    <div id="fjx"></div>
                    <div class="ztcx">
                        <h4>更多热点</h4>
                        <span>加盟国美</span>
                        <br>
                        <span>招商合作</span>
                        <br>
                        <span>企业采购</span>
                     
                    </div>
                   
                    <div id="fjx"></div>
                    <div class="ztcx">
                        <h4>国美旗下</h4>
                        <span>国美管家</span>
                        <br>
                        <span>美锅优食</span>
                     
                    </div>
                </ul>
            </li>
            <li  class="r-6 abc">
                <i id="sj" class="iconfont">&#xe604;</i>
                <div>真快乐APP</div>
                <i class="iconfont">&#xe6ca;</i>
                <i id="lb" class="iconfont">&#xe85c;</i>
                <ul class="zklapp efg"><img src="./imgs/cd-nav-4.png" alt=""></ul>
            </li>
        </ul>
    </div>
</div>
<div class="index-head">
    <div class="logo"></div>
    <div class="top-search">
        <div class="top-search-up">
            <div class="top-search-up1">
                <div>商品</div>
                <i class="iconfont">&#xe6ca;</i>
            </div>
            <div class="top-search-up2">
               <input  type="text" id="txt" class="search" placeholder="手机">
                    <ul id="list"></ul>
                <i id="sh" class="iconfont">&#xe609;</i>
            </div>
            <button class="ss">搜索</button>
        </div>
        <div class="top-search-dw">
            <div class="Applexp">Apple新品</div>
            <div>冰箱自营</div>
            <div>海尔洗衣机</div>
            <div>美的空调</div>
            <div>休闲零食</div>
            <div>平板电脑</div>
            <div>电烤箱</div>
            <div class="hgsc">火锅食材开店</div>
        </div>
    </div>
    <div class="cartlink">
        <i id="gwc" class="iconfont">&#xe61a;</i>
        <div class="wd cart">我的购物车 </div>
        <i class="iconfont">&#xe6ca;</i>
    </div>
</div>
<!-- banner上的导航 -->
<div class="box1">
    <div class="qbsp-nav">
        <div class="qbsp-nav1">全部商品分类</div>
        <div class="qbsp-nav2">
            <div><a href="../index.html">首页</a> </div>
            <div>发现</div>
            <span></span>
            <div>超市</div>
            <div>电器城</div>
            <div>家具家装</div>
            <span></span>
            <div>智能</div>
            <div>管家</div>
            <div>金融</div>
            <span></span>
            <div>美锅优食</div>
        </div>
        <div class="qbsp-nav3">政务信息快递 
                   
        </div>
        <div class="qbsp-nav4">
            <button> <i class="iconfont">&#xe6f0;</i></button>
            <button> <i class="iconfont">&#xe606;</i></button>
        </div>     
    </div>
</div>
</div>
<!-- 下部 -->
<div class="bottoms">
    <style>
        .bottom-nave{
    width: 1200px;
    height: 72px;
    padding: 15px 0;
    background: #F5F5F5;
    margin: 0 auto;
    margin-top: 30px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
.pz{
    width: 396px;
    height: 42px;
    display: flex;
    justify-content: space-between;
    align-items: center;
   padding: 0 60px;
}
.pz>#tb{
    color: blueviolet;
    font-size: 42px !important;
    margin: 0 0 0 0;
}
.pz1{
    color: #404040;
    font-size: 18px;
    font-weight: bold;
}
.pz2{
    color: #404040;
    text-align: center;
    line-height:42px ;
    
}
.pz3{
    color: #404040;
    text-align: center;
    font-size: 18px;
    line-height:42px ;
    
}

/* 下部 列表 */
.bottom-list{
    width: 1350px;
    height: 150px;
    margin: 0 auto;
}
.list-1{
    width: 243px;
    height: 150px;
    padding: 15px 0px 0px 125px;
    color: #A5A5A5;
    font-size: 12px;
    float: left;
}
.list-1 div{
    margin: 3px 0px;
}
#list-name{
    font-size: 16px;
    color: #5E5E5E;
}

    </style>
    <!-- 下部-上 -->
    <div class="bottom-nave">
        <div class="pz">
            <i class="iconfont" id="tb">&#xe659;</i>
            <div class="pz1">品质</div>
            <div class="pz2">.</div>
            <div class="pz3">正品行货 购物无忧</div>
        </div>
        <div class="pz">
            <i class="iconfont" id="tb">&#xe659;</i>
            <div class="pz1">低价</div>
            <div class="pz2">.</div>
            <div class="pz3">普惠实价 帮你省钱</div>
        </div>
        <div class="pz">
            <i class="iconfont" id="tb">&#xe659;</i>
            <div class="pz1">速达</div>
            <div class="pz2">.</div>
            <div class="pz3">专业配送 按时按需</div>
        </div>
    </div>
    <!-- 下部 列表 -->
    <div class="bottom-list">
        <div class="list-1">
            <div id="list-name">物流配送</div>
            <div>配送查询</div>
            <div>配送服务</div>
            <div>配送费用</div>
            <div>配送时效</div>
            <div>签收与验货</div>
        </div>
        <div class="list-1">
            <div id="list-name">支付与账户</div>
            <div>配送查询</div>
            <div>配送服务</div>
            <div>配送费用</div>
            <div>配送时效</div>
            <div>签收与验货</div>
        </div>
        <div class="list-1">
            <div id="list-name">售后服务</div>
            <div>配送查询</div>
            <div>配送服务</div>
            <div>配送费用</div>
            <div>配送时效</div>
            <div>签收与验货</div>
        </div>
        <div class="list-1">
            <div id="list-name">会员专区</div>
            <div>配送查询</div>
            <div>配送服务</div>
            <div>配送费用</div>
            <div>配送时效</div>
            <div>签收与验货</div>
        </div>
        <div class="list-1">
            <div id="list-name">购物帮助</div>
            <div>配送查询</div>
            <div>配送服务</div>
            <div>配送费用</div>
            <div>配送时效</div>
            <div>签收与验货</div>
        </div>
    </div>
</div>
<!-- 脚部-footer -->
<div class="footer-box">
    <style>
        /* 脚部-footer */
.footer-box{
    width: 1903px;
    height: 300px;
    margin: 0 auto;
    background: #F7F7F7;
    border-top: 1px solid #B20FD3;
}
.footer{
    width: 1200px;
    height: 300px;
    background: #F7F7F7;
    margin: 0 auto;
    /* border: 1px solid black; */
}
.footer-top{
    width: 1200px;
    height: 100px;
    /* border:1px solid pink; */
    margin: 0 auto;
}
.footer-top-1{
    width: 315px;
    height: 85px;
    display: flex;
    margin-top: 15px;
    float: left;

}
.footer-top-1-zi{
    display: flex;
    flex-flow: column;
    margin-left: 10px;
    margin-top: 5px;
}
.footer-top-1-zi span:nth-child(1){
    color: #333333;
    font-size: 16px;
    line-height: 16px;

}
.footer-top-1-zi span:nth-child(2){
    color: #999999;
    font-size: 12px;
    line-height: 12px;
    margin-top: 5px;
}
.footer-top-3{
    float: right;
}
.jt-list{
    width: 1200px;
    height: 22px;
   display: flex;
   justify-content: space-between;
}
.jt-list li{
    display: block;
    list-style: none;
    float: left;
    font-size: 12px;
    line-height: 22px;
    color: #666666;
    margin-right: 15px;
}
.jt-list div{
    font-size: 12px;
    color: #999999;
    float: right;
}
.footer>span{
    color: #999999;
    font-size: 12px;
    text-align: center;
}
#gh{
    font-size: 12px;
    position: relative;
    bottom: -5px;
}
.footer-bottom{
    width: 1200px;
    height: 72px;
    border-top: 1px solid #cccccc;
    margin-top: 10px;
  
}
.footer-bottom-1{
    display: flex;
    margin-top: 15px;
    float: left;
}
.footer-bottom-1-zi{
    width: 86px;
    height: 36px;
    color: #999999;
    font-size: 12px;
    margin-left: 10px;
}
.footer-bottom-2-zi{
    width: 75px;
    height: 27px;
    color: #999999;
    font-size: 12px;
    margin-left: 8px; 
    margin-top: 8px;
}
.footer-bottom-4-zi{
    width: 135px;
    height: 36px;
    color: #999999;
    font-size: 12px;
    margin-left: 10px; 
}
    </style>
    <div class="footer">
        <div class="footer-top">
            <div class="footer-top-1">
                <div ><img src="./imgs/footer-1.png" alt=""></div>
                <div class="footer-top-1-zi">
                    <span>门店服务</span>
                    <span>国美门店全国共计2000余家</span>
                </div>
            </div>
            <div class="footer-top-1">
                <div ><img src="./imgs/footer-2.png" alt=""></div>
                <div class="footer-top-1-zi">
                    <span>用户体验</span>
                    <span>国美门店全国共计2000余家</span>
                </div>
            </div>
            <div class="footer-top-3"><img src="./imgs/footer-3.png" alt=""></div>
        </div>
        <div class="jt-list">
            <div class="jt-list-detail">
            <li>国美控股集团</li>
            <li>美锅优食</li>
            <li>国美管家</li>
            <li>加入我们</li>
            <li>|</li>
            <li>品牌大全</li>
            <li>商品专题</li>
            <li>商品词</li>
            <li>热词搜索</li>
            <li>友情链接</li>
            <li>风险监测</li>
            <li>|</li>
            <li>国家入住</li>
            <li>国美分销</li>
            </div>
            
            <div>扫描客户端下载</div> 
        </div>
        <span>本公司游戏产品适合18岁以上成年人使用&nbsp;&nbsp;违法和不良信息举报电话：021-39900132&nbsp;&nbsp;互联网药品信息服务资格证编号（沪）-经营性-2019-0006</span>
        <br>
        <span>网络食品销售第三方平台提供者备案：沪网食备A0015号&nbsp;&nbsp;网络文化经营许可证沪网文[2021] 0385-031 号增值电信业务经营许可证</span>
        <br>
        <span>客服电话:4008113333  沪ICP备11009419号-1/京ICP备 19011786号  京B2-20191290  经营执照  营业执照  出版物经营许可证</span>
        <br>
        <span>©2000-2021  国美在线电子商务有限公司版权所有 <img src="./imgs/footer-4.png" alt="" id="gh"> 京公网安备 11010502038379号</span>

        <div class="footer-bottom">
            <div class="footer-bottom-1">
                <img src="./imgs/footer-5.png" alt="">
                <div class="footer-bottom-1-zi">经营性网站 <br>  备案信息</div>
            </div>
            <div class="footer-bottom-1">
                <img src="./imgs/footer-6.png" alt="">
                <div class="footer-bottom-2-zi">诚信网站</div>
            </div>
            <div class="footer-bottom-1">
                <img src="./imgs/footer-7.png" alt="">
                <div class="footer-bottom-1-zi">朝阳网络 <br>  警察</div>
            </div>
            <div class="footer-bottom-1">
                <img src="./imgs/footer-9.png" alt="">
                <div class="footer-bottom-4-zi">上海市互联网违法 <br>  不良信息举报中心</div>
            </div>
            <div class="footer-bottom-1">
                <img src="./imgs/footer-8.png" alt="">
                <div class="footer-bottom-2-zi">网购大家评</div>
            </div>
            <div class="footer-bottom-1">
                <img src="./imgs/footer-10.png" alt="">
                <div class="footer-bottom-4-zi">网上有害信息<br>  不良举报专区</div>
            </div>
            
        </div>
    </div>
</div>

<!-- 右栏框 -->
<div class="ylk">
    <style>
        .ylk{
    width: 35px;
    height: 100%;
    position: fixed;
    right: 0;
    background: #333333;
    z-index: 500;
    text-align: center;
    padding: 10 3px;
    
}
.ylk i{
    font-size: 12px;
    padding: 10px 0;


}
.ylk span:nth-child(4){
    padding: 5px 8px;
   
}
.ylk-up{
    position: absolute;
    display: flex;
    flex-flow: column;
    justify-items:flex-start;
    color: #FFFFFF;
    left:0;
    top:30%;
}
#ylk-up1,#ylk-up2,#ylk-up3,#ylk-up4{
    font-size: 24px !important;
}
.ylk-down{
    position: absolute;
    top:80%;
}

.ylk-down i{
    display: block;
    /* margin-top: 15px; */
    color: #F7F7F7;
    padding: 12px 5px;
}
.ylk-up>i:hover,.ylk-up>span:hover,.ylk-down>i:hover{
    color: #FFFFFF;
    background: black;
}
    </style>
    <div class="ylk-up">
        <i class="iconfont" id="ylk-up1">&#xe602;</i>
        <span>-</span>
        <i class="iconfont"id="ylk-up2">&#xe61a;</i>
        <span>购物车</span>
        <span>-</span>
        <i class="iconfont"id="ylk-up3">&#xe60a;</i>

    </div>
    <div class="ylk-down">
        <i class="iconfont" id="ylk-up1">&#xe604;</i>           
        <i class="iconfont"id="ylk-up2">&#xe73d;</i>
        <i class="iconfont"id="ylk-up3">&#xe607;</i>
        <i class="iconfont"id="ylk-up4">&#xe6f0;</i>

    </div>
</div>

